<script setup lang="ts">
import { listProduct } from '@/api/product/product';
import { onMounted } from 'vue';
import { useVModel } from '@vueuse/core';
const props = defineProps<{
  modelValue?: string | number;
  name?: string | number;
  productType?: string | number;
}>();
const emit = defineEmits(['update:modelValue', 'update:name']);
const value = useVModel(props, 'modelValue', emit);
const name = useVModel(props, 'name', emit);

const list = ref([]);
const init = async (paraps?: any) => {
  const _list = await listProduct(paraps);
  list.value = _list.data;
};

onMounted(async () => {
  await init({ materialId: value.value, productType: props.productType });
});

const _value = computed({
  get: () => value.value,
  set: (val) => {
    value.value = val;
    let _list = list.value.filter((x) => x.productId === val);
    if (_list.length > 0) name.value = _list[0].productName;
  }
});
</script>

<template>
  <el-select v-model="_value" v-bind="$attrs" placeholder="请选择产品">
    <el-option v-for="item in list" :key="item.productId" :label="item.productName" :value="item.productId"> </el-option>
  </el-select>
</template>

<style scoped lang="scss"></style>
